<template>
    <div class="login-container">
        <el-card style="max-width: 480px">
            <el-form ref="formRef" class="login-form" :model="loginData" label-width="auto" label-position="right">
                <h3 class="title" style="text-align: center;">修改密码</h3>
                <el-form-item label="账号">
                    <!-- <span class="formLeftLabel">
                        账号:
                    </span> -->
                    <el-input class="formRight" v-model="loginData.UserName" disabled name="username" type="text"
                        placeholder="username" />
                </el-form-item>
                <el-form-item prop="OldPassword" :rules="[
                    { required: true, message: '不能为空' },
                ]" label="原密码">
                    <el-input class="formRight" v-model="loginData.OldPassword" name="password" type="password"
                        auto-complete="on" />
                </el-form-item>
                <el-form-item prop="NewPassword" label="新密码" :rules="[
                    { required: true, message: '不能为空' },
                ]">
                    <!-- <span class="formLeftLabel">
                        新密码:
                    </span> -->
                    <el-input class="formRight" v-model="loginData.NewPassword" name="password" type="password"
                        auto-complete="on" />
                </el-form-item>
                <el-form-item prop="NewPassword2" label="确认新密码" :rules="[
                    { required: true, message: '不能为空' },
                ]">
                    <el-input class="formRight" v-model="loginData.NewPassword2" name="password" type="password"
                        auto-complete="on" />
                </el-form-item>
                <el-form-item>
                    <el-button :loading="isLoading" type="primary" style="width:80%;margin:0 auto"
                        @click.native.prevent="handleLogin(formRef)">
                        确认修改
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import api from '../../api'
import router from '../../router/index'

import { ElMessage, ComponentSize, FormInstance, FormRules } from 'element-plus';
const formRef = ref<FormInstance>()
const loginData = reactive({
    UserName: '',
    UserId: 0,
    OldPassword: '',
    NewPassword: '',
    NewPassword2: '',
})
var isLoading = ref(false)


onMounted(() => {
    loginData.UserName = localStorage.getItem('userName')
    loginData.UserId = parseInt(localStorage.getItem('userId'))
    //   console.log('Component has been mounted',userName,userId);
    // Perform actions like fetching data or manipulating the DOM here
});

var handleLogin = async (formEl: FormInstance | undefined) => {
    console.log('loginForm', loginData)

    formEl.validate(async (valid) => {
        if (valid) {
            //new old password is same
            if (loginData.NewPassword !== loginData.NewPassword2) {
                ElMessage.error("两次输入新密码不一致")
                return
            }

            isLoading.value = true
            var res = await api.post('User/ChangePwd', loginData)
            isLoading.value = false
            if (res && res.Code == 200) {
                ElMessage.success('修改成功')
                // localStorage.setItem('token', res.Data.token)
                // localStorage.setItem('userName', res.Data.userName)
                // localStorage.setItem('userId', res.Data.userId)

                // let beforeLoginPath = localStorage.getItem('beforeLoginPath')
                // if (beforeLoginPath) {
                //     router.push(beforeLoginPath)
                // }
                // else {
                    router.push('/')
                // }
            }
        } else {
            console.log('error submit!')
        }
    })

}

</script>

<style scoped>
.formRight {
    width: auto;
}

.formLeftLabel {
    width: 27%;
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* height: 100vh;
    width: 100vw; */
    background-color: #f0f0f0;
}

.login-form {
    position: relative;
    width: 280px;
    /* padding: 10px 35px 0; */
    margin: 0 auto;
    overflow: hidden;
}

.svg-container {
    padding: 6px 5px 6px 15px;
    color: #889aa4;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
}
</style>